import React, { Component } from 'react'
import {
  StyleSheet,
  View,
  Text,
  TextInput,
  AlertIOS
} from 'react-native'
import Button from 'react-native-button'
import CountDown from 'react-native-countdown-component'
import request from '../common/request'
import { api } from '../common/config'


class Login extends Component {
  constructor(props) {
    super(props)

    this.state = {
      phoneNumber: '',
      verifyCode: '',
      codeSent: false,
      countingDone: false
    }
  }

  _sendVerifyCode() {
    let phoneNumber = this.state.phoneNumber
    if (!phoneNumber) {
      return AlertIOS.alert('手机号不能为空！')
    }

    const url = api.base + api.verify
    const body = {
      phoneNumber: phoneNumber
    }

    request.post(url, body)
      .then(data => {
        if (data && data.success) {
          this._showVerifyCode()
        } else {
          AlertIOS.alert('获取验证码失败，请检查手机号是否正确！')
        }
      })
      .catch(error => {
        console.warn(error)
        AlertIOS.alert('获取验证码失败，请检查网络！')
      })
  }

  _showVerifyCode() {
    this.setState({
      codeSent: true,
      countingDone: false
    })
  }

  _countionDone() {
    this.setState({
      countingDone: true
    })
  }

  _submit() {
    let phoneNumber = this.state.phoneNumber
    let verifyCode = this.state.verifyCode
    if (!phoneNumber && !verifyCode) {
      return AlertIOS.alert('手机号或验证码不能为空！')
    }

    const url = api.base + api.signUp
    const body = {
      phoneNumber: phoneNumber,
      verifyCode: verifyCode
    }

    request.post(url, body)
      .then(data => {
        if (data && data.success) {
          this.props.afterLogin(data.data)
        } else {
          AlertIOS.alert('密码错误！')
        }
      })
      .catch(error => {
        console.warn(error)
        AlertIOS.alert('获取验证码失败，请检查网络！')
      })
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.signupBox}>
          <Text style={styles.title}>快速登录</Text>
          <TextInput
            placeholder='输入手机号'
            autoCaptialize={'none'}
            autoCorrect={false}
            keyboardType={'number-pad'}
            style={styles.inputField}
            onChangeText={text => {
              this.setState({
                phoneNumber: text
              })
            }}
          />

          {
            this.state.codeSent
              ? <View style={styles.verifyCodeBox}>
                <TextInput
                  placeholder='输入验证码'
                  autoCaptialize={'none'}
                  autoCorrect={false}
                  keyboardType={'number-pad'}
                  style={[styles.inputField, styles.verifyField]}
                  onChangeText={text => {
                    this.setState({
                      verifyCode: text
                    })
                  }}
                />

                {
                  this.state.countingDone
                    ? <View style={styles.countBtnBox}>
                      <Button
                        style={styles.countBtn}
                        onPress={() => { this._sendVerifyCode() }}>发送验证码</Button>
                    </View>
                    : <View style={styles.countDownBox}>
                      <CountDown
                        style={styles.CountDownBtn}
                        digitStyle={{ backgroundColor: 'transparent' }}
                        digitTxtStyle={{ color: '#fff' }}
                        until={60}
                        onFinish={this._countionDone.bind(this)}
                        timeToShow={['S']}
                        timeLabels={{ s: null }}
                        size={10}
                      />
                      <Text style={styles.timeLabel}>秒可重发</Text>
                    </View>
                }

              </View>
              : null
          }

          {
            this.state.codeSent
              ? <Button
                style={styles.btn}
                onPress={() => { this._submit() }}>登录</Button>
              : <Button
                style={styles.btn}
                onPress={() => { this._sendVerifyCode() }}>发送验证码</Button>
          }

        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 10,
    backgroundColor: '#f9f9f9'
  },

  signupBox: {
    marginTop: 30
  },

  title: {
    marginBottom: 20,
    color: '#333',
    fontSize: 20,
    textAlign: 'center'
  },

  inputField: {
    height: 40,
    padding: 5,
    color: '#666',
    fontSize: 16,
    backgroundColor: '#fff',
    borderRadius: 4
  },

  verifyField: {
    width: 250
  },

  verifyCodeBox: {
    marginTop: 10,
    flexDirection: 'row',
    justifyContent: 'space-between'
  },

  countBtnBox: {
    width: 90,
    height: 40,
    justifyContent: 'center',
    marginLeft: 10,
    backgroundColor: '#ee753c',
    borderColor: '#ee753c',
    borderRadius: 2
  },

  countBtn: {
    color: '#fff',
    fontSize: 15,
    fontWeight: '600'
  },

  countDownBox: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ee753c',
    borderRadius: 2
  },

  CountDownBtn: {
    height: 40,
    flexDirection: 'row',
  },

  timeLabel: {
    color: '#fff',
    paddingRight: 10
  },

  btn: {
    marginTop: 10,
    padding: 10,
    backgroundColor: '#ee753c',
    color: '#fff',
    borderWidth: 1,
    borderRadius: 4,
    borderColor: '#ee753c'
  }

})

module.exports = Login